---
title: Integrations
---

import { SiAngular, SiAstro, SiNextdotjs, SiReact, SiVuedotjs, SiWebcomponentsdotorg } from '@icons-pack/react-simple-icons'

Univer supports integration with various UI libraries and frameworks, allowing you to use Univer in different environments. Whether it's React, Vue, or Angular, Univer provides a seamless integration experience.

If you are already familiar with the framework or library you are using, you can jump directly to the corresponding integration guide:

<Cards>
  <Card
    icon={<SiReact className="text-blue-400" />}
    title="React Integration Guide"
    href="/guides/sheets/getting-started/integrations/react"
 />
  <Card
    icon={<SiVuedotjs className="text-green-600" />}
    title="Vue Integration Guide"
    href="/guides/sheets/getting-started/integrations/vue"
 />
  <Card
    icon={<SiWebcomponentsdotorg className="text-indigo-400" />}
    title="Web Component Integration Guide"
    href="/guides/sheets/getting-started/integrations/web-component"
 />
</Cards>

We also provide quick start templates for users who want to integrate Univer by creating a brand new project. You can click on the corresponding links below to access these templates:

<Cards>
  <Card
    icon={<SiReact className="text-blue-400" />}
    title="Univer ❤️ Vite + React"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-react"
 />
  <Card
    icon={<SiAngular className="text-red-400" />}
    title="Univer ❤️ Angular"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-angular"
 />
  <Card
    icon={<SiVuedotjs className="text-green-600" />}
    title="Univer ❤️ Vue CLI + Vue@2.x"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-vue2"
 />
  <Card
    icon={<SiVuedotjs className="text-green-600" />}
    title="Univer ❤️ Vite + Vue@3.x"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-vue3"
 />
  <Card
    icon={<SiNextdotjs className="text-zinc-800 dark:text-zinc-200" />}
    title="Univer ❤️ Next.js"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-nextjs"
 />
  <Card
    icon={<SiAstro className="text-pink-400" />}
    title="Univer ❤️ Astro"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-astro"
 />
</Cards>
